<template>
  <div class="need-header-page" :class="{ 'full-window': isFull }">
    <HeaderNavBar :title="title"></HeaderNavBar>
    <div class="need-header-body">
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup>
import HeaderNavBar from "@/components/HeaderNavBar/index.vue";
import { computed } from "@vue/reactivity";
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const title = ref(""),
  isFull = computed(() => {
    return Boolean(route.meta.full);
  });
if (!!route.meta.title) {
  title.value = route.meta.title;
}
watch(
  () => route.meta.title,
  val => {
    title.value = val;
  }
);
</script>
<style lang="less">
.need-header-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: var(--bg-color);
  .need-header-body {
    flex: 1;
  }
  &.full-window {
    height: 100%;
    .need-header-body {
      overflow: hidden;
    }
  }
}
</style>
